<!--Header.vue-->
<template>
    <div class="header">
        <div class="left">
            <span style="font-size:20px">{{name}}</span>
        </div>
        <div class="right">
            <el-popover placement="bottom" width="320px" trigger="click" popper-class="popper-user-box">
                <!-- 具名插槽  名字是reference-->
                <template #reference>
                    <div class="author">
                        <i class="icon el-icon-s-custom" />
                        {{ userInfo && userInfo.nickName || '' }}
                        <i class="el-icon-caret-bottom" />
                    </div>
                </template>
                <div class="nickname">
                    <p>登录名：{{ userInfo && userInfo.loginUserName || '' }}</p>
                    <p>昵称：{{ userInfo && userInfo.nickName || '' }}</p>
                    <el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
                </div>
            </el-popover>
        </div>
    </div>
</template>

<script>
import { localRemove, pathMap } from "../utils";
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
export default {
    name: "Header",
    setup() {
        const router = useRouter();
        const state = reactive({
            name: "首页",
            userInfo: null,
        });
        //初始化执行方法
        onMounted(() => {
            const pathname = window.location.hash.split("/")[1] || "";
            if (!["login"].includes(pathname)) {
                getUserInfo();
            }
        });
        //获取用户信息
        const getUserInfo = async () => {
            const userInfo = await axios.get("/adminUser/profile");
            console.log(userInfo);
            state.userInfo = userInfo;
        };
        //退出登录
        const logout = () => {
            axios.delete("/logout").then(() => {
                localRemove("token");
                router.push({ path: "/login" });
            });
        };
        //监听路由变化方法 afterEach
        router.afterEach((to) => {
            //to能获取到路由相关信息
            state.name = pathMap[to.name];
        });
        
        return {
            ...toRefs(state),
            logout,
        };
    },
};
</script>

<style scoped>
.header {
    height: 50px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.right > div > .icon {
    font-size: 18px;
    margin-right: 6px;
}
.author {
    margin-left: 10px;
    cursor: pointer;
}
</style>

<style>

.popper-user-box {
    background: url("https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png")
        50% 50% no-repeat !important;
    background-size: cover !important;
    border-radius: 0 !important;
}
.popper-user-box .nickname {
    position: relative;
    color: #ffffff;
}
.popper-user-box .nickname .logout {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
</style>